<template>
  <div class="about">
     <header>
        <span @click="$router.back()">返回</span>
        <section>购物清单</section>
        <span @click="iseit=!iseit">{{iseit?'编辑':'完成'}}</span>
     </header>
     <ul>
       <li v-for="(item,index) in cartList" :key="index">
         <input type="checkbox" v-model="item.check" @change="checkOne">
         <img src="../assets/logo.png" alt="">
         <section>
           <h5>{{item.name}}</h5>
           <p>￥{{item.price}}</p>
           <span>库存{{item.payNum}}件</span>
         </section>
         <div>
           <p @click="item.buyNum++">+</p>
           <p>{{item.buyNum}}</p>
           <p @click="item.buyNum==1?1:item.buyNum--">-</p>
         </div>
       </li>
     </ul>
     <div class="foot">
       <section>
         <input type="checkbox" v-model="allCheck" @change="$store.commit('checkAll',allCheck)">
         全选
       </section>
       <span>合计：{{allPrice}}</span>
       <span class="foot_rt" @click="del">{{iseit?'去结算':'删除'}}（{{allNum}}）</span>
     </div>
  </div>
</template>
<script>
import { useStore } from 'vuex';
import { ref,computed,reactive } from 'vue';
export default {
  setup(props) {
    const store = useStore();
    const cartList = computed(() => store.state.cartList);
    const allCheck = ref(false);
    // 初始的时候 给全选赋值
    allCheck.value = cartList.value.every(item => item.check);

    const checkOne = () => { // 反选的函数
      store.commit('kong');
      allCheck.value = cartList.value.every(item => item.check);
    }


    const allPrice = computed(() => { // 总价
      let price = 0;
      cartList.value.forEach(item => {
        if(item.check){
          price+=item.price*item.buyNum
        }
      })
      return price;
    })
    
   const allNum =  computed(() => { // 选中的总个数
      let num = 0;
      cartList.value.forEach(item => {
        if(item.check){
          num+=item.buyNum
        }
      })
      return num;
    })


    const iseit = ref(true); // 是否编辑的值
  //  const data = reactive({
  //    allPrice: computed(() => {

  //    })
  //  })
  const del = () => { // 批量删除的函数
     if (iseit.value) return;
     store.commit('delect');
  }
    return{
      cartList,
      allCheck,
      checkOne,
      allPrice,
      allNum,
      iseit,
      del
    }
  }
}
</script>
<style lang="scss" scoped>
  .about{
    height: 100%;
    background: #e9e9e9;
    header{
      display: flex;
      height: 45px;
      align-items: center;
      background: #fff;
      span{
        width: 60px;
        text-align: center;
      }
      section{
        flex: 1;
        text-align: center;
      }
    }
  }
  ul{
    height: calc(100% - 95px);
    overflow: auto;
    li{
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      align-items: center;
      background: #fff;
      margin-top: 10px;
      img{
        width: 70px;
      }
      section{
        flex: 1;
        margin-left: 10px;
        p{
          color: #584483;
        }
        span{
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  .foot{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    section{
      margin-left: 10px;
    }
    .foot_rt{
      background: #8d58f6;
      color: #fff;
      line-height: 50px;
      padding: 0 10px;
    }
  }
</style>
